/*
 * @Author: hongbin
 * @Date: 2022-04-30 20:39:54
 * @LastEditors: hongbin
 * @LastEditTime: 2022-05-01 16:17:39
 * @Description:开源页面
 */
import { FC, ReactElement, useEffect, useState } from "react";
import styled from "styled-components";
import {
  BackstageSystem,
  CSDN,
  Github,
  MongoDb,
  RuYi,
  ShiBing,
  WebSite,
} from "../../components/Icon";
import { flexCenter } from "../../styled";
import { FixedWrap } from "../About";
import smallwaves from "../../assets/smallwaves.svg";
import { rangeTrans } from "../../utils";
interface IProps {}

const scrollHeight = window.innerHeight * 2;

const sourceInfo = [
  {
    name: "github",
    url: "https://github.com/Jedi-hongbin",
    image: Github,
    skills: [],
  },
  {
    name: "我的CSDN",
    url: "https://blog.csdn.net/printf_hello",
    image: CSDN,
    skills: [],
  },
  {
    name: "如意官网",
    url: "https://gitee.com/honbingitee/ruyi-lowcode",
    image: RuYi,
    skills: ["react", "styled-components"],
  },
  {
    name: "如意低代码平台",
    url: "https://gitee.com/honbingitee/ruyi-web",
    image: RuYi,
    skills: ["react", "styled-components", "ajax"],
  },
  {
    name: "在线mongodb管理工具",
    url: "https://gitee.com/honbingitee/web-db",
    image: MongoDb,
    skills: ["react", "styled-components", "MUI"],
  },
  {
    name: "3D抗美援朝数据可视化",
    url: "https://gitee.com/honbingitee/kmyc",
    image: ShiBing,
    skills: ["react", "styled-components", "Three.js"],
  },
  {
    name: "我的博客",
    url: "https://gitee.com/honbingitee/hongbin.xyz-ssr",
    image: WebSite,
    skills: ["Next.js", "styled-components", "axios"],
  },
  {
    name: "我的博客-后台",
    url: "https://gitee.com/honbingitee/hongbin_xyz_admin/",
    image: BackstageSystem,
    skills: ["react", "styled-components", "antd", "axios"],
  },
];

const OpenSource: FC<IProps> = (): ReactElement => {
  const [scrollY, setScrollY] = useState(window.scrollY);

  useEffect(() => {
    const scroll = () => {
      setScrollY(window.scrollY);
    };
    document.addEventListener("scroll", scroll);
    return () => {
      document.removeEventListener("scroll", scroll);
    };
  }, []);

  const percent = scrollY / scrollHeight;

  return (
    <Container>
      <FixedWrap>
        <SourceList
          style={{
            transform: `translateX(${rangeTrans(percent * 1.5, [100, 0])}vmin)`,
          }}
        >
          {sourceInfo.map(({ name, url, image, skills }, index) => (
            <Card
              key={name}
              onClick={() => {
                window.open(url, "_blank");
              }}
              style={{
                transform: `translateX(${rangeTrans(percent * 1.5, [
                  index * 7,
                  0,
                ])}vmin)`,
              }}
            >
              {image}
              <strong>{name}</strong>
              {skills.length ? (
                <Skills>
                  {skills.map((skill) => (
                    <span key={name + skill}>{skill}</span>
                  ))}
                </Skills>
              ) : null}
            </Card>
          ))}
        </SourceList>
        <FooterTitle
          style={{
            bottom: rangeTrans(percent, [-40, 0]) + "vh",
          }}
        >
          开源仍在继续...
        </FooterTitle>
      </FixedWrap>
    </Container>
  );
};

export default OpenSource;

const Skills = styled.div`
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  width: inherit;
  flex-wrap: wrap;
  span {
    background: #fffae555;
    margin-left: 1vh;
    margin-bottom: 1vh;
    border-radius: 10px;
    padding: 0.2vw 0.4vw;
    font-size: 0.7vmax;
  }
`;

const FooterTitle = styled.div`
  width: ${window.IsPhone ? "100vw" : "70vw"};
  height: 10vh;
  background: #726bbe;
  border-top-left-radius: 1vw;
  border-top-right-radius: 1vw;
  position: absolute;
  bottom: 0;
  line-height: 10vh;
  text-align: center;
  font-weight: bold;
  font-size: 2vmax;
  font-family: "code";
  letter-spacing: 2px;
  color: ${(props) => props.theme.lightText};
  box-shadow: inset 2px 7px 5px 4px #615aae, inset -5px -4px 6px 2px #5a52af;
`;

const SourceList = styled.div`
  width: ${window.IsPhone ? "100vw" : "80vw"};
  height: 70vh;
  ${flexCenter};
  flex-wrap: wrap;

  svg {
    max-width: 3vmax;
    min-width: 3vmax;
    height: 3vmax;
    margin-right: 1vmax;
  }
`;

const Card = styled.div`
  width: 15vw;
  height: 20vh;
  background: ${`url(${smallwaves})`};
  background-size: cover;
  border-radius: 1vh;
  padding: 1vmin 1vmax;
  margin: 1vmin 1vmax;
  ${flexCenter};
  color: ${(props) => props.theme.lightText};
  font-weight: bold;
  box-shadow: 0 0 0 3px #333, inset 5px 4px 9px 2px #423880,
    inset -4px -3px 11px 0px #7770c9;
  position: relative;
  cursor: pointer;
  font-family: "code";
  transition: transform 0.3s linear, box-shadow 0.3s linear;
  ::before {
    content: "";
    position: absolute;
    width: 3%;
    height: 90%;
    background: #ccc;
    right: -6%;
    right: -5%;
    border-radius: 3px;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
  }
  :hover {
    transform: scale(1.005) translateY(0.2vh);
    box-shadow: 0 0 0 3px #333, inset 0 0 0 0 #423880, inset 0 0 0 0 #9c94f1,
      3px 1px 18px 11px #544bb1;
  }
  @media screen and (max-width: ${(props) => props.theme.media.phone}) {
    width: 20vmax;
    height: 12vh;
  }
`;

const Container = styled.div`
  height: 300vh;
  width: 100vw;
`;
